---
title: Themes
description: Gestalte deine Dokumentation mit einem Community-Theme für Starlight
tableOfContents: false
sidebar:
  order: 2
head:
  - tag: style
    content: |
      body { --sl-content-width: 66.75rem; }
---

import ThemeGrid from '~/components/theme-grid.astro';

Ein Theme ist ein Starlight-Plugin, welches das Erscheinungsbild einer Website mit [benutzerdefiniertem CSS](/de/guides/css-and-tailwind/), [Komponenten&shy;ersetzung](/de/guides/overriding-components/) oder anderen neuen Funktionen verändert.

## Community-Themes

Installiere ein von der Community erstelltes Theme, um das Aussehen deiner Website schnell anzupassen.

Schau dir unten eine Vorschau aller Designs an oder probier sie interaktiv auf der [Starlight Themes-Demo-Website](https://starlight-themes.netlify.app/) aus.

<ThemeGrid
	labels={{
		/** Barrierefreie Beschriftung für den Themenschalter. */
		legend: 'Vorschau',
		/** Barrierefreies Label für die dunkle Farbschema-Variante. */
		dark: 'Dunkel',
		/** Barrierefreies Label für die helle Farbschema-Variante. */
		light: 'Hell',
	}}
	themes={[
		{
			title: 'Starlight Rapide',
			description:
				'Starlight-Theme inspiriert vom Visual Studio Code Vitesse-Theme.',
			href: 'https://starlight-theme-rapide.vercel.app/',
			previews: { light: 'rapide-light.png', dark: 'rapide-dark.png' },
		},
		{
			title: 'Starlight Obsidian',
			description:
				'Starlight-Theme inspiriert vom Obsidian Publish-Websites-Theme.',
			href: 'https://fevol.github.io/starlight-theme-obsidian/',
			previews: { light: 'obsidian-light.png', dark: 'obsidian-dark.png' },
		},
		{
			title: 'Catppuccin für Starlight',
			description: 'Beruhigendes Pastelltheme für Starlight.',
			href: 'https://starlight.catppuccin.com/',
			previews: { light: 'catppuccin-light.png', dark: 'catppuccin-dark.png' },
		},
		{
			title: 'Ion',
			description: 'Ein elegantes, modernes Theme für Starlight.',
			href: 'https://louisescher.github.io/starlight-ion-theme/',
			previews: { light: 'ion-light.png', dark: 'ion-dark.png' },
		},
		{
			title: 'Starlight Black',
			description: 'Starlight-Theme inspiriert von der Shadcn-Dokumentation.',
			href: 'https://starlight-theme-black.vercel.app/',
			previews: { light: 'black-light.png', dark: 'black-dark.png' },
		},
		{
			title: 'Starlight Flexoki',
			description:
				'Ein warmes und freundliches Theme basierend auf der Flexoki-Farbpalette.',
			href: 'https://delucis.github.io/starlight-theme-flexoki/',
			previews: { light: 'flexoki-light.png', dark: 'flexoki-dark.png' },
		},
		{
			title: 'Starlight Nova',
			description: 'Ein modernes und wunderschönes Theme für Starlight.',
			href: 'https://starlight-theme-nova.pages.dev/',
			previews: { light: 'nova-light.png', dark: 'nova-dark.png' },
		},
		{
			title: 'Starlight Next.js Theme',
			description: 'Starlight-Theme inspiriert von der Next.js-Dokumentation.',
			href: 'https://starlight-theme-next.trueberryless.org/',
			previews: { light: 'nextjs-light.png', dark: 'nextjs-dark.png' },
		},
		{
			title: 'Starlight Galaxy',
			description:
				'Ein Astro Starlight-Theme, das perfekt für die Veröffentlichung von Dokumentationen und Bildungsinhalten ist.',
			href: 'https://frostybee.github.io/starlight-theme-galaxy/',
			previews: { light: 'galaxy-light.png', dark: 'galaxy-dark.png' },
		},
		{
			title: 'Starlight Page',
			description:
				'Ein intuitives, modernes Starlight-Theme mit flüssigen Einblend-Animationen.',
			href: 'https://pelagornis-page.netlify.app/',
			previews: { light: 'page-light.png', dark: 'page-dark.png' },
		},
		{
			title: 'Starlight Gruvbox',
			description: 'Retro-Groove-Theme für Starlight',
			href: 'https://starlight-theme-gruvbox.otterlord.dev/',
			previews: { light: 'gruvbox-light.png', dark: 'gruvbox-dark.png' },
		},
		{
			title: 'Starlight Six',
			description:
				'Das schlichte und moderne Astro.js Starlight-Theme von Six Technology',
			href: 'https://six-tech.github.io/Six.StarlightTheme/',
			previews: { light: 'six-light.png', dark: 'six-dark.png' },
		},
	]}
/>

:::tip[Füge dein eigenes Theme hinzu!]
Hast du ein Starlight-Theme gebaut?
[Eröffne einen PR](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md#themes) welcher dein Theme zu dieser Seite hinzufügt.
:::
